<template>
  <div class="wrap">
    <h4 class="head">文章推荐</h4>
    <div class="body">
      <ul class="list">
        <li
          v-for="item in articles"
          :key="item.id"
          @click="toArticle(item.id)"
        >
          <div class="main">
            <h5 class="title">{{item.title}}</h5>
            <div class="desc">
              <span>{{item.category.name}}</span>
              <span>{{item.stats.view | formatNumber}}阅读</span>
            </div>
          </div>
          <div class="cover">
            <img class="img" v-lazy="item.image_urls[0]+'@176w_132h'" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { formatNumber } from '@/filters/filters.js'
export default {
  name: 'ArticleMore',
  inject: ['rootRouter'],
  props: {
    articles: {
      type: Array
    }
  },
  filters: {
    formatNumber
  },
  methods: {
    toArticle (id) {
      this.rootRouter.push({ name: 'article', params: { id } })
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    position: relative;
    border-top: rem(10px) solid #f3f4f4;
  }
  .head{
    position: relative;
    padding: rem(10px);
    margin: 0;
    font-size: rem(16px);
    font-weight: 600;
    color: $color-text-regular;
    @include border1px(#e7e7e7, 0 0 1px 0);
  }
  .body{
    padding: {
      left: rem(10px);
      right: rem(10px);
    }
  }
  .list{
    li{
      display: flex;
      padding: {
        top: rem(10px);
        bottom: rem(10px);
      };
      @include border1px(#e7e7e7, 0 0 1px 0);
      .main{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .title{
        margin: 0;
        font-size: rem(14px);
        font-weight: 400;
        color: $color-text-regular;
        line-height: rem(21px);
        @include max-lines(2);
      }
      .desc{
        font-size: rem(12px);
        line-height: rem(17px);
        color: $color-text-secondary;
        span{
          margin-right: rem(5px);
        }
      }
      .cover{
        @include cover(176, 132, rem(4px));
        width: rem(88px);
        height: rem(66px);
        background: {
          color: $color-grey;
          size: 36%;
          image: url('~@/assets/placeholder.png');
          repeat: no-repeat;
          position: 50%;
        }
      }
    }
  }
</style>
